<template>
	<view :data-theme="theme" >
		<view class="footer_box" :class="{ footer_bg: bg }">
			<view v-for="(item, index) of navigationList" :key="index" class="footer_item">
				<view v-if="item.raised" class="raised"  @click="onRaised(item.pagePath)" style="height: 100%;">
					<view  class="footer_raised_item">
						<image  class="footer_raised_item_image ra-image" :src="'/' + item.iconPath" mode="aspectFit"></image>
					</view>
					<view class="footer_nav_item ">
						<!-- <image  class="footer_nav_item_image" src="/static/images/tabBar/tab_home.png" mode="aspectFit"></image> -->
						<text class="footer_nav_item_text ra-text" style="z-index: 1000;" >{{ item.text }}</text>
					</view>
				</view>
				
				<view v-else class="footer_nav_item" @click="onPageJump(item.pagePath,index)">
					<!-- <image v-if="item.pagePath == path" class="footer_nav_item_image" :src="'/' + item.selectedIconPath" mode="aspectFit"></image> -->
					<!-- <view  v-if="item.pagePath == path" class="footer_raised_item">
						<view class="footer_nav_bg display-flex display-flex-align-center display-flex-justify-center">
							<image  class="footer_raised_item_image"  :src="'/' + item.selectedIconPath" mode="aspectFit"></image>
						</view>
						
					</view> -->
					<view  v-if="item.pagePath == path" >
						<view class="footer_nav_bg display-flex display-flex-align-center display-flex-justify-center">
							<image :animation="animationDatasf"  class="footer_raised_item_image"  :src="'/' + item.selectedIconPath" mode="aspectFit"></image>
						</view>
						
					</view>
					<image v-else-if="index==1"  :animation="animationDataddx"   class="footer_nav_item_image" :src="'/' + item.iconPath" mode="aspectFit"></image>
					<image v-else    class="footer_nav_item_image" :src="'/' + item.iconPath" mode="aspectFit"></image>
					
					<text class="footer_nav_item_text" :class="[item.pagePath == path ? 'footer_item_text_active' : '']">{{ item.text }}</text>
				</view>
			</view>
		</view>
		<view v-if="bg" class="footer_station"></view>
	</view>
</template>
<script>
		const app = getApp();
export default {
	props: {
		bg: {
			type: Boolean,
			default: true
		},
		am: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			theme:app.globalData.theme,
			animationDatasf:{},
			animationDataddxTimer: null,
			animationDataddx: {},
			path: '',
			navigationList: [
				{
					pagePath: "pages/index/index",
					text: "首页",
					iconPath: "static/tabBar/tab_home.png",
					selectedIconPath: "static/tabBar/tab_home_current.png",
				},
				// {
				// 	pagePath: "pages/mall/index",
				// 	text: "公交商城",
				// 	iconPath: "static/tabBar/9.9.png",
				// 	selectedIconPath: "/static/tabBar/9.9.png"
				// },
				// #ifdef MP-ALIPAY
				// {
				// 	pagePath: "pages/service/qr",
				// 	iconPath: 'static/tabBar/chengchema.png',
				// 	text: '乘车码',
				// 	raised: true
				// },
				// #endif
				{
					pagePath: "pages/real_bus_index/index", //新版本
					text: "实时公交",
					iconPath: "static/tabBar/tab-realbus.png",
					selectedIconPath: "static/tabBar/tab-realbus-current.png"
				},
				{
					pagePath: "pages/user/index",
					text: "我的",
					iconPath: "static/tabBar/tab_my.png",
					selectedIconPath: "static/tabBar/tab_my_current.png"
				}
			],
			 popupShow: false,
			 animated: false,
			 current: 0,
			 flag: 1,
			animationData: {}
		};
	},
	beforeDestroy() {
		clearInterval(this.animationDataddxTimer);
	},
	//第一次加载
	created() {
		
		//获取所有页面
		let currentPages = getCurrentPages();
		let page = currentPages[currentPages.length - 1];
		this.path = page.route;
		
	
	   this.reddx()
		
		
	},
	

	//方法
	methods: {
		initnav(){
			this.resf()
		},
		resf: function () {
			var that = this
			
			let animation = uni.createAnimation({
				 delay: 0,
				 duration: 800,
				 timingFunction: 'linear',
			   })
			 animation.scale(0.7,0.7).step()
			 that.animationDatasf = animation.export()
			 setTimeout(() => {
				animation.scale(1).step()
					that.animationDatasf = animation.export()
			 }, 500)
			  console.log("that.animationDatasf",)
		 },
		reddx: function () {
			var that = this
			
			let animation = uni.createAnimation({
				 delay: 0,
				 duration: 400,
				 timingFunction: 'linear',
			   })
			   // this.animation = animation
			   this.moveDistance = 10
						
			   animation.translateY(5).scale(0.9,0.9).step()
				this.animationDataddx = animation.export()
			
			this.animationDataddxTimer= setInterval(() => {
				  animation.translateY(0).scale(1).step({
					duration: 400
				  })
					that.animationDataddx = animation.export()
				  setTimeout(() => {
					animation.translateY(5).scale(0.9,0.9).step()
						that.animationDataddx = animation.export()
				  }, 400)
				}, 800)
		 },
		onPageJump(url,index) {
			var that = this
			
		
			if(url == 'pages/mall/index'){
				// #ifdef MP-WEIXIN
				 uni.openEmbeddedMiniProgram({
				 	appId: 'wx0c57f62f5a689349', 
				 	path: 'pages/home/dashboard/index?shopAutoEnter=1&kdt_id=120226447',
				 	extraData: {
				 	},
				 	success(res) {
				     // 打开成功
				 	}
				 })
				 // #endif
				 // #ifdef APP-PLUS
				   //需调用plus.share.getServices获取微信分享服务对象    
				  plus.share.getServices((s) => {    
					  let sweixin = {};    
					  for (let i = 0; i < s.length; i++) {    
						  let share = s[i];    
						  if (share.id === 'weixin') {    
							  sweixin = share    
						  }    
					  }    
					  //小程序参数，必填    
					  let WeixinMiniProgramOptions = {    
						  id: 'gh_d43c71782fe5',    
						  path: 'pages/home/dashboard/index?shopAutoEnter=1&kdt_id=120226447',//可指定打开的页面    
					  }    
					  sweixin ? sweixin.launchMiniProgram(WeixinMiniProgramOptions) : plus.nativeUI.alert(    
						  '当前环境不支持微信操作!');    
				  }, function(e) {    
					  console.log("获取分享服务列表失败：" + e.message);    
				  });  
				  // #endif
				  // #ifdef MP-ALIPAY
				   uni.navigateToMiniProgram({
					appId: '2021003184687759', 
					path: '/pages/home/dashboard/index',
					extraData: {
					},
					success(res) {
					   // 打开成功
					}
				   })
				   // #endif
				  return;
		
			} else {
				if (this.path !== url) {
					uni.switchTab({
						url: '/' + url,
						complete() {
						
							
						}
					});
				} else {
					
				}
			}
			
		},
		onRaised(url){
			uni.vibrateShort({});
			// #ifdef MP-ALIPAY
			my.ap.openURL({
			  url: 'alipays://platformapi/startapp?appId=20002047', // 请将 url 替换为有效的页面地址
			  success: (res) => {
			    console.log('openURL success', res)
			  },
			  fail: (err) => {
			    console.log('openURL success', err)
			  }
			});
			 // #endif
		}
	}
};
</script>
<style lang="scss" scoped>
.footer_station {
	height: 100rpx;
	box-sizing: content-box;
	padding-bottom: constant(safe-area-inset-bottom);  
	padding-bottom: env(safe-area-inset-bottom); 
}
.footer_box {
	height: 130rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	z-index: 502;
	box-sizing: content-box;
	padding-bottom: constant(safe-area-inset-bottom);  
	padding-bottom: env(safe-area-inset-bottom); 
}
.footer_bg {
	box-shadow: 0 -5px 15px 0 #e7e7e8;
	background-color: #FFF;
}
.footer_item {
	position: relative;
	flex: 1;
}
.footer_nav_item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.footer_nav_item:active {
	background-color: rgba($color: #fff, $alpha: 0.1);
}


.footer_nav_item_text {
	font-size: 18rpx;
	color: #999999;
	margin-top: 6rpx;
}


.footer_item_text_active{
	@include main_color(theme);
	// color: #007AFF;
	// margin-top: 27px;
	z-index: 100;
}
.footer_nav_item_text_active {
	// color: #f9a633;
	@include main_color(theme);
}
.footer_nav_item_image {
	width: 50rpx;
	height: 50rpx;
}
.footer_raised_item {
	position: absolute;
	// top: -50rpx;
	 top: -20rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 100rpx;
	height: 100rpx;
	background-color: #FFF;
	border-radius: 50%;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	justify-content: center;
	 box-shadow: 0px -4px 9px -4px #e7e7e8;

}
.footer_raised_item_image {
	width: 45rpx;
	height: 45rpx;
}

.ra-image{
	width: 65rpx;
	height: 65rpx;
	margin-top: 8rpx;
}

.ra-text {
	font-size: 18rpx;
	color: #999999;
	margin-top: 50rpx;
}


.popup_content {
	background-color: #FFF;
	padding: 30rpx;
}
.raised{
	display: flex;
	flex-direction: column;
}


.footer_nav_bg{
	@include linear-gradient(theme);
	// background: linear-gradient(360deg, #5ac0ff 0%, #007AFF 100%);
	border-radius: 50%;
	// width: 75rpx;
	// height: 75rpx;
	width:70rpx;
	height: 70rpx;
	// top: 6px;
	// position: absolute;
}
</style>
